<template>
  <div class="dashboard">
    <!-- 顶部统计区：资产收入 + 资金收入 + 账户信息 -->
    <div class="top-row">
      <!-- 资产收入 -->
      <div class="stats-card asset">
        <div class="title">资产收入</div>
        <div class="main-data" v-if="!loading.assetIncome">
          <span class="big-num">总收入 ￥{{ assetIncome.sumIncome }}</span>
        </div>
        <div class="loading" v-else>加载中...</div>

        <div class="carbon-info" v-if="!loading.assetIncome">
          <p>碳信用: {{ assetIncome.credit }} tCO2e</p>
          <p>碳配额: {{ assetIncome.quota }} tCO2e</p>
          <p></p>
        </div>
      </div>
      <!-- <el-table
  :data="projects"
  stripe
  v-loading="loading.projects"
  element-loading-text="正在加载项目数据..."
>
</el-table> -->

      

      <!-- 账户信息 -->
      <div class="stats-card account">
        <div class="user-header">
          <!-- 头像：优先使用后端返回的avatar，无则用默认图 -->
          <img
            :src="
              userInfo.avatar
                ? userInfo.avatar
                : 'https://cdn-icons-png.flaticon.com/128/1005/1005141.png'
            "
            alt="用户头像"
            class="avatar"
          />
          <div class="user-details">
            <!-- 用户名：后端返回的username（用户姓名） -->
            <div class="username">{{ userInfo.username || "未知用户" }}</div>
            <div class="tags">
              <!-- 系统角色：直接显示后端返回的roleNames -->
              <span class="tag super-admin">{{
                userInfo.roleNames || "普通用户"
              }}</span>
              <!-- 产品版本：直接显示后端处理后的结果，无需前端格式化 -->
              <span class="tag pro">
                {{ userInfo.productVersion || "基础版" }}
              </span>
            </div>
          </div>
          <!-- 植物图标：保持默认 -->
          <img
            src="https://cdn-icons-png.flaticon.com/128/731/731977.png"
            alt="植物图标"
            class="plant"
          />
        </div>
        <div class="account-metrics">
          <!-- 账户有效期：后端返回的validityPeriod（日期格式处理） -->
          <p>账户有效期：{{ userInfo.validityPeriod || "--" }}</p>
          <!-- 可选：补充显示开户时间（后端createdTime） -->
          <p>开户时间：{{ userInfo.createdTime || "--" }}</p>
          <!-- 可选：补充显示账户状态（后端accountStatus，1=启用/0=禁用） -->
          <p>账户状态：{{ userInfo.accountStatus }}</p>
        </div>
      </div>
    </div>

    <!-- 中间数据卡：供应量 + 开发量 + 销售量 -->
    <div class="middle-row">
     <!-- 中间数据卡：供应量（替换原有的静态供应量卡片） -->
<div class="data-card supply">
  <div class="card-header">
    <div class="icon supply-icon"></div>
    <div class="card-title">供应量</div>
  </div>

  <!-- 主数据区域（加载状态判断） -->
  <div class="main-data" v-if="!loading.supplyData">
    <span class="big-num">{{ supplyData.credit + supplyData.quota+ supplyData.green}}</span>
    <span class="unit">CNC</span>
  </div>
  <div class="loading" v-else>加载中...</div>

  <!-- 碳指标数据（加载状态判断） -->
  <div class="carbon-metrics" v-if="!loading.supplyData">
    <p>碳信用: {{ supplyData.credit }} tCO2e</p>
    <p>碳配额: {{ supplyData.quota }} tCO2e</p>
    <p>绿证: {{ supplyData.green }} kWh</p>
  </div>
  <div class="loading" v-else>加载中...</div>

  <!-- 底部统计数据（加载状态判断） -->
  <div class="footer-metrics" v-if="!loading.supplyData">
    <p>总供应量: {{ supplyData.credit + supplyData.quota+ supplyData.green}} CNC</p>
  </div>
  <div class="loading" v-else>加载中...</div>
</div>

      <!-- <div class="data-card develop">
        <div class="card-header">
          <div class="icon develop-icon"></div>
          <div class="card-title">开发量 (上月/7月)</div>
        </div>
        <div class="main-data">
          <span class="big-num">153860</span>
          <span class="unit">CNC</span>
        </div>
        <div class="carbon-metrics">
          <p>碳信用: 90854 tCO2e</p>
          <p>碳配额: 63006 tCO2e</p>
          <p>绿证: 0 kWh</p>
        </div>
        <div class="footer-metrics">
          <p>总供应量: 250812 CNC</p>
          <p>碳资产估值: ￥12540600</p>
        </div>
      </div> -->

      <div class="data-card sales">
  <div class="card-header">
    <div class="icon sales-icon"></div>
    <div class="card-title">销售量 </div>
  </div>

  <!-- 主数据区域（加载状态判断） -->
  <div class="main-data" v-if="!loading.salesData">
    <span class="big-num">{{ salesData.credit + salesData.quota + salesData.green }}</span>
    <span class="unit">CNC</span>
  </div>
  <div class="loading" v-else>加载中...</div>

  <!-- 碳指标数据（加载状态判断） -->
  <div class="carbon-metrics" v-if="!loading.salesData">
    <p>碳信用: {{ salesData.credit }} tCO2e</p>
    <p>碳配额: {{ salesData.quota }} tCO2e</p>
    <p>绿证: {{ salesData.green }} kWh</p>
  </div>
  <div class="loading" v-else>加载中...</div>

  <!-- 底部统计数据（加载状态判断） -->
  <div class="footer-metrics" v-if="!loading.salesData">
    <p>总销售量: {{ salesData.credit + salesData.quota + salesData.green }} CNC</p>
  </div>
  <div class="loading" v-else>加载中...</div>
</div>
    </div>
    <!-- 项目统计模块 -->
    <div class="project-stats">
      <div class="stats-column">
  <div class="stats-title">项目统计</div>

  <!-- 左侧统计数据卡片（添加加载状态） -->
  <div class="stat-card green-card" v-if="!loading.projectStats">
    <div class="stat-value">{{ projectStats.auditedCount }}个</div>
    <div class="stat-label">累计审定项目</div>
  </div>
  <div class="loading" v-else>加载中...</div>

  <div class="stat-card blue-card" v-if="!loading.projectStats">
    <div class="stat-value">{{ projectStats.filedCount }}个</div>
    <div class="stat-label">累计备案项目</div>
  </div>
  <div class="loading" v-else>加载中...</div>

  <div class="stat-card blue-card" v-if="!loading.projectStats">
    <div class="stat-value">{{ projectStats.issuedCount }}个</div>
    <div class="stat-label">累计签发项目</div>
  </div>
  <div class="loading" v-else>加载中...</div>

  <!-- 预计减排量写死，不随接口变化 -->
  <div class="stat-card green-card">
    <div class="stat-value">99999+</div>
    <div class="stat-label">预计减排(tCO2e)</div>
  </div>
</div>
      <!-- 右侧项目列表表格 -->
      <div class="table-container">
        <table class="project-table">
          <thead>
            <tr>
              <th>项目名称</th>
              <th>预计减排量(tCO2e)</th>
              <th>项目状态</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(project, index) in projects" :key="index">
              <td>{{ project.projectName }}</td>
              <td>{{ project.estimatedReduction }}</td>
              <td>
                <span :class="`status-tag ${project.statusClass}`">
                  {{ project.projectStatus }}
                </span>
              </td>
            </tr>
          </tbody>
        </table>
        
      </div>
    </div>
    <!-- 底部项目进展：4个阶段 -->
    

    <!-- 简化版碳交易行情 -->
    <div class="carbon-trade-simplified">
      <div class="trade-header">
        <h3>碳交易行情</h3>
      </div>

      <div class="project-types-table">
    <div class="loading" v-if="loading.tradeData">加载中...</div>
    <table class="types-table" v-else>
      <thead>
        <tr>
          <th>项目类型</th>
          <th>项目数量(个)</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tradeData" :key="index">
          <td>{{ item.projectType }}</td> <!-- 项目类型 -->
          <td>{{ item.projectCount }}</td> <!-- 项目数量 -->
        </tr>
      </tbody>
    </table>
  </div>
      <!-- 碳行业资讯板块（修改后） -->
<div class="carbon-industry-news">
  <div class="news-header">
    <h3>碳行业资讯</h3>
  </div>
  <div class="news-content">
    <div class="news-column left-column">
      <!-- 加载状态 -->
      <div class="loading" v-if="loading.newsData">加载中...</div>
      <!-- 资讯列表（修改跳转逻辑） -->
      <ul class="news-list" v-else>
        <li 
          v-for="(news, index) in newsData.list" 
          :key="index"
          @click="handleNewsClick(news.url)" 
          style="cursor: pointer; padding: 4px 0; transition: color 0.2s;"
          :style="{ color: news.url ? '#333' : '#999', cursor: news.url ? 'pointer' : 'default' }"
        >
          <!-- 显示标题 + URL 缺失提示 -->
          {{ news.title }}
          <span v-if="!news.url" style="font-size: 12px; color: #f56c6c; margin-left: 8px;">(链接缺失)</span>
        </li>
        <li v-if="newsData.list.length === 0" style="color: #999;">暂无相关资讯</li>
      </ul>
      <!-- 分页组件 -->
      <div class="pagination-container" style="margin-top: 10px;">
        <el-pagination
          @size-change="handleNewsSizeChange"
          @current-change="handleNewsCurrentChange"
          :current-page="newsPage.currentPage"
          :page-sizes="[5, 7, 10]"  
          :page-size="newsPage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="newsData.totalCount"
          size="small"
        ></el-pagination>
      </div>
    </div>
  </div>
</div>
      </div>
      <!-- 常用功能模块 -->
    <div class="common-functions">
      <div class="functions-header">
        <h3>常用功能</h3>
      </div>
      <div class="functions-grid">
        <!-- 项目立项 - 碳资产开发模块 -->
        <div class="function-card" @click="goToPage('/carbon/projectCreate')">
          <i class="iconfont icon-project-establish"></i>
          <span>项目立项</span>
          <p>涵盖项目立项、碳申报等项目全生命周期管理</p>
        </div>
        
        <!-- 项目开发 - 碳资产开发模块 -->
        <div class="function-card" @click="goToPage('/carbon/projectDo')">
          <i class="iconfont icon-project-develop"></i>
          <span>项目开发</span>
          <p>及时查看碳项目开发进度，提供阶段指引</p>
        </div>
        
        <!-- 项目方法学 - 中和资产管理模块 -->
        <div class="function-card" @click="goToPage('/carbon/methodology')">
          <i class="iconfont icon-project-methodology"></i>
          <span>项目方法学</span>
          <p>涵盖国内外各类碳项目方法学，健全方法</p>
        </div>
        
        
        
        <!-- 交易行情 - 行情模块 -->
        <div class="function-card" @click="goToPage('/trade/quote')">
          <i class="iconfont icon-trade-market"></i>
          <span>交易行情</span>
          <p>实时掌握碳交易行情，辅助交易决策</p>
        </div>
        
        <!-- 交易所开户 - 碳交易管理模块 -->
        <div class="function-card" @click="goToPage('/trade/account')">
          <i class="iconfont icon-trade-account"></i>
          <span>交易所开户</span>
          <p>国内多交易所账户指引，支持快捷开户</p>
        </div>
        
      </div>
    </div>
    </div>

</template>

<script>
import Cookies from "js-cookie";
export default {
  created() {
    // 页面初始化时加载所有数据
    this.fetchAllData();
  },
  name: "Dashboard",
  data() {
    return {
      user: JSON.parse(localStorage.getItem("user") || "{}"),
      loading: {
        assetIncome: true,
        fundIncome: true,
        userInfo: true,
        supplyData: true,
        developmentData: true,
        salesData: true,
        projectStats: true,
        projects: true,
        tradeData: true,
        newsData: true,
      },

      // 分页相关
      currentPage: 1,
      pageSize: 5,
      totalProjects: 0,

      // 资产收入数据
      assetIncome: {
        sumIncome: 0,
        credit: 0,
        quota: 0,
      },
      tradeData: [],
      projectStats: {
        auditedCount: 0,  // 累计审定项目数
        filedCount: 0,    // 累计备案项目数
        issuedCount: 0    // 累计签发项目数
      },
      userInfo: {
        username: "", // 对应后端 SysAccount 的 username（用户姓名）
        roleNames: "", // 对应后端的 roleNames（系统角色）
        productVersion: "", // 对应后端的 productVersion（产品版本）
        validityPeriod: "", // 对应后端的 validityPeriod（账户有效期）
        createdTime: "", // 对应后端的 createdTime（开户时间）
        accountStatus: "", // 对应后端的 accountStatus（账户状态）
        avatar: "", // 对应后端的 avatar（用户头像）
      },
      supplyData: {
      credit: 0, // 碳信用供应量（tCO2e）
      quota: 0, // 碳配额供应量（tCO2e）
      green: 0, // 绿证供应量（kWh）
    },
    salesData: {
      credit: 0, // 碳信用销售量（tCO2e）
      quota: 0, // 碳配额销售量（tCO2e）
      green: 0, // 绿证销售量（kWh）
    },
     newsData: {
      list: [], // 资讯列表数据
      totalCount: 0 // 资讯总条数（用于分页）
    },
    // 资讯分页参数
    newsPage: {
      currentPage: 1, // 当前页码
      pageSize: 7 // 每页条数（匹配模板中默认显示7条资讯）
    },
      // 项目统计数据
      projects: [
      ],

      // 项目阶段数据
      stages: [
      ],
    };
  },
  methods: {
     goToPage(path) {
      // 检查路径是否以斜杠开头，如果不是则添加
      const fullPath = path.startsWith('/') ? path : `/${path}`;
      
      try {
        // 尝试导航到目标路径
        this.$router.push(fullPath);
      } catch (error) {
        console.error(`导航到 ${fullPath} 失败:`, error);
        this.$message.warning("该功能页面暂时无法访问");
      }
    },
     // 【新增】资讯点击跳转方法（核心修复）
    handleNewsClick(url) {
      // 1. 先判断 URL 是否存在
      if (!url) {
        this.$message.warning("该资讯暂无有效链接");
        return;
      }
      
      // 2. 补充 URL 协议（若后端返回的是 //xxx 或 xxx，自动加 https）
      let fullUrl = url;
      if (url.startsWith("//")) {
        fullUrl = "https:" + url;
      } else if (!url.startsWith("http://") && !url.startsWith("https://")) {
        fullUrl = "https://" + url; // 默认补充 https（避免相对路径）
      }
      
      // 3. 打开新窗口跳转（添加noopener noreferrer 提升安全性）
      window.open(fullUrl, "_blank", "noopener,noreferrer");
      
      // 4. 可选：打印日志用于调试（确认 URL 是否正确）
      console.log("资讯跳转 URL:", fullUrl);
    },

     async fetchNewsData() {
    // 开启资讯加载状态（复用原有 loading.newsData）
    this.loading.newsData = true;
    try {
      // 调用后端碳资讯分页接口（需与后端确认实际接口地址）
      const res = await this.$request.post("/system/carbonArticle/search", {
        // 分页参数
        currentPage: this.newsPage.currentPage,
        pageSize: this.newsPage.pageSize,
      });

      console.log("碳资讯数据响应:", res);
      if (res.code === 200) {
        // 赋值资讯列表和总条数（匹配后端返回格式：list-列表，total-总条数）
        this.newsData.list = res.data.list || [];
        this.newsData.totalCount = res.data.total || 0;
      } else {
        this.$message.warning("碳资讯数据获取失败: " + (res.msg || "未知错误"));
        // 失败时重置数据，避免页面显示异常
        this.newsData.list = [];
        this.newsData.totalCount = 0;
      }
    } catch (error) {
      console.error("碳资讯数据请求异常:", error);
      this.$message.error("碳资讯数据加载失败，请检查网络后重试");
      // 异常时重置数据
      this.newsData.list = [];
      this.newsData.totalCount = 0;
    } finally {
      // 关闭加载状态
      this.loading.newsData = false;
    }
  },

  /**
   * 碳资讯分页切换：每页条数改变
   * @param {number} val 新的每页条数
   */
  handleNewsSizeChange(val) {
    this.newsPage.pageSize = val;
    this.newsPage.currentPage = 1; // 条数改变时重置为第一页
    this.fetchNewsData(); // 重新请求数据
  },

  /**
   * 碳资讯分页切换：当前页码改变
   * @param {number} val 新的页码
   */
  handleNewsCurrentChange(val) {
    this.newsPage.currentPage = val;
    this.fetchNewsData(); // 重新请求数据
  },
   async fetchTradeData() {
  // 开启交易行情数据加载状态
  this.loading.tradeData = true;
  try {
    // 调用碳交易行情接口（传递租户ID筛选数据，需与后端接口地址匹配）
    const res = await this.$request.get("/assets/carbonProject/fetchTradeData", {
      params: {
        tenantId: this.user.tenantId, // 租户ID筛选
      }
    });
    console.log("碳交易行情数据响应:", res);

    if (res.code === 200) {
      // 提取项目类型和数量数据
      this.tradeData = res.data || [];
    } else {
      this.$message.warning("碳交易行情数据获取失败: " + (res.msg || "未知错误"));
      this.tradeData = [];
    }
  } catch (error) {
    console.error("碳交易行情数据请求异常:", error);
    this.$message.error("碳交易行情数据加载失败，请检查网络后重试");
    this.tradeData = [];
  } finally {
    this.loading.tradeData = false;
  }
},

    // 项目统计数据请求方法
    async fetchProjectStats() {
      this.loading.projectStats = true;
      try {
        // 调用项目统计接口（替换为实际接口地址）
        const res = await this.$request.get("/assets/carbonProject/fetchProjectStats", {
          params: {
            tenantId: this.user.tenantId  // 传递租户ID
          }
        });
        console.log("项目统计数据响应:", res);
        
        if (res.code === 200) {
      // 关键：判断 res.data 是否为 null/undefined，若为空则设为默认空对象
      const statsData = res.data || {}; 
      // 从 statsData 中提取字段，若字段不存在则设为 0（避免 undefined）
      this.projectStats = {
        auditedCount: statsData.auditedCount || 0,  // 累计审定项目（默认0）
        filedCount: statsData.filedCount || 0,      // 累计备案项目（默认0）
        issuedCount: statsData.issuedCount || 0     // 累计签发项目（默认0）
      };
        } else {
          this.$message.warning("项目统计数据获取失败: " + res.msg);
        }
      } catch (error) {
        console.error("项目统计数据请求失败:", error);
        this.$message.error("项目统计数据加载失败");
      } finally {
        this.loading.projectStats = false;
      }
    }
  ,
  // 项目列表数据请求方法
async fetchProjects() {
  // 开启加载状态
  this.loading.projects = true;
  try {
    // 调用项目列表接口，支持分页参数
    const res = await this.$request.get("/assets/carbonProject/sysQueryBySelector", {
      params: {
        tenantId: this.user.tenantId,  // 租户ID筛选
        pageNum: this.currentPage,     // 当前页码
        pageSize: this.pageSize        // 每页条数
      }
    });
    console.log("项目列表数据响应:", res);
    
    if (res.code === 200) {
      // 赋值项目列表数据（与后端返回字段匹配）
      this.projects = res.data.records || [];
      // 更新总条数用于分页
      this.totalProjects = res.data.total || 0;
    } else {
      this.$message.warning("项目列表数据获取失败: " + res.msg);
      // 失败时显示空数据
      this.projects = [];
      this.totalProjects = 0;
    }
  } catch (error) {
    console.error("项目列表数据请求失败:", error);
    this.$message.error("项目列表数据加载失败");
    // 异常时显示空数据
    this.projects = [];
    this.totalProjects = 0;
  } finally {
    // 关闭加载状态
    this.loading.projects = false;
  }
},
    // 批量获取所有数据
    async fetchAllData() {
      try {
        // 并行请求所有数据
        await Promise.all([
          this.fetchAssetIncome(),
          // this.fetchFundIncome(),
          this.fetchUserInfo(),
          this.fetchSupplyData(),
          // this.fetchDevelopmentData(),
          this.fetchSalesData(),
          this.fetchProjectStats(),
          this.fetchProjects(),
          this.fetchTradeData(),
          this.fetchNewsData(),
        ]);
      } catch (error) {
        console.error("数据加载失败:", error);
        this.$message.error("数据加载失败，请刷新页面重试");
      }
    },
 async fetchSalesData() {
    this.loading.salesData = true;
    try {
      // 调用销售量接口，需替换为实际接口地址
      const res = await this.$request.get("/trade/carbonTradeContract/fetchSalesData", {
        params: {
          tenantId: this.user.tenantId // 传递租户ID
        }
      });
      console.log("销售量数据响应:", res);
      if (res.code === 200) {
        this.salesData = res.data;
      } else {
        this.$message.warning("销售量数据获取失败: " + res.msg);
      }
    } catch (error) {
      console.error("销售量数据请求失败:", error);
      this.$message.error("销售量数据请求失败");
    } finally {
      this.loading.salesData = false;
    }
  },
    // 获取资产收入数据示例
    async fetchAssetIncome() {
      this.loading.assetIncome = true;
      try {
        const res = await this.$request.get(
          "/trade/carbonTradeContract/assetIncome",
          {
            params: {
              tenantId: this.user.tenantId, // 传递租户ID参数
            },
          }
        );
        if (res.code === 200) {
          this.assetIncome = res.data;
        } else {
          this.$message.warning("资产收入数据获取失败: " + res.msg);
        }
      } catch (error) {
        console.error("资产收入数据请求失败:", error);
        this.$message.error("资产收入数据请求失败");
      } finally {
        this.loading.assetIncome = false;
      }
    },
   async fetchSupplyData() {
  // 修正加载状态为供应量对应的loading，避免与资产收入共用
  this.loading.supplyData = true;
  try {
    // 修正接口地址为供应量专属接口（假设为/supply/data，需与后端确认）
    const res = await this.$request.get(
          "/trade/carbonTradeContract/fetchSupplyData",
      {
        params: {
          tenantId: this.user.tenantId, // 传递租户ID参数
        },
      }
    );
    if (res.code === 200) {
      // 将数据赋值给供应量对应的变量（需在data中定义supplyData）
      this.supplyData = res.data;
    } else {
      this.$message.warning("供应量数据获取失败: " + res.msg);
    }
  } catch (error) {
    console.error("供应量数据请求失败:", error);
    this.$message.error("供应量数据请求失败");
  } finally {
    // 修正加载状态关闭为供应量对应的loading
    this.loading.supplyData = false;
  }
},
    async fetchUserInfo() {
      this.loading.userInfo = true; // 注意这里应该用userInfo的加载状态，原代码用了assetIncome的，需要修正
      const javaInfoStr = Cookies.get("JavaInfo");
      let info = JSON.parse(decodeURIComponent(javaInfoStr));
      let info1 = parseInt(info);
      try {
        const res = await this.$request.get(`/system/sysAccount/info/${info1}`);
        if (res.code === 200) {
          this.userInfo = res.data;
        } else {
          this.$message.warning("用户信息获取失败: " + res.msg);
        }
      } catch (error) {
        console.error("用户信息请求失败:", error);
        this.$message.error("用户信息请求失败");
      } finally {
        this.loading.userInfo = false; // 对应修改加载状态
      }
    },

    // 其他数据请求方法...
  },
};
</script>

<style scoped>
/* 全局布局 */
.dashboard {
  padding: 20px;
  background: #f9fafc;
}

/* 项目统计模块样式 */
.project-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  /* 关键：让子元素自动拉伸高度 */
  align-items: stretch;
}

.stats-column {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  /* 去掉固定宽度，改为自适应 */
  min-width: 220px;
  width: auto;
}

.stats-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f1f1;
}

.stat-card {
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
}

.green-card {
  background-color: #f0fdf4;
}

.green-card::before {
  background-color: #22c55e;
}

.blue-card {
  background-color: #eff6ff;
}

.blue-card::before {
  background-color: #3b82f6;
}

.stat-value {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
}
.function-card {
  transition: all 0.2s ease;
}
.function-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.green-card .stat-value {
  color: #22c55e;
}
.news-list li:hover {
  color: #0088ff; /*  hover 时变蓝，提示可点击 */
  text-decoration: underline; /* 可选：添加下划线 */
}

/* 修复无 URL 时的 hover 样式（新增） */
.news-list li:hover:not([style*="cursor: default"]) {
  color: #0088ff;
}
.blue-card .stat-value {
  color: #3b82f6;
}

.stat-label {
  font-size: 13px;
  color: #666;
}

.table-container {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  /* 去掉固定宽度，改为自适应 */
  min-width: 400px;
  width: auto;
  overflow-y: auto; /* 表格内容多可滚动 */
}

.project-table {
  width: 100%;
  border-collapse: collapse;
}

.project-table th,
.project-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}

.project-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #475569;
  position: sticky;
  top: 0;
}

.status-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.approved {
  background-color: #dcfce7;
  color: #166534;
}

.status-tag.pending {
  background-color: #fee2e2;
  color: #991b1b;
}

/* 顶部行：Flex布局 + 响应式 */
.top-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* 统计卡片通用样式 */
.stats-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
  min-width: 280px;
}

.asset {
  background: #e6faff;
}
.fund {
  background: #eaffea;
}
.account {
  background: #fff;
}

.title {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.main-data {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.big-num {
  font-size: 28px;
  color: #0088ff;
}

.unit {
  font-size: 16px;
  color: #666;
}

.metrics {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: #666;
  font-size: 14px;
  margin: 10px 0;
}

.metric {
  display: flex;
  flex-direction: column;
}

.metric .value {
  margin-top: 4px;
}

.up {
  color: green;
}
.total {
  color: #ff6600;
  font-weight: 500;
}

.carbon-info {
  color: #666;
  line-height: 1.6;
  font-size: 14px;
}

/* 账户信息特殊样式 */
.user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.avatar,
.plant {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.plant {
  margin-left: auto;
}

.username {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
/* 常用功能模块样式 */
.common-functions {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-top: 20px;
}

.functions-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
}

.functions-header h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.functions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  flex-wrap: wrap;
}

.function-card {
  background: #f8fafc;
  border-radius: 6px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.function-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.function-card i {
  font-size: 24px;
  color: #0088ff;
  margin-bottom: 10px;
  display: block;
}

.function-card span {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.function-card p {
  font-size: 12px;
  color: #666;
  margin: 0;
  line-height: 1.4;
}
.tags {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.super-admin {
  background: #ffe8cc;
  color: #ff9900;
}
.pro {
  background: #e6f2ff;
  color: #0099ff;
}

.account-metrics {
  color: #666;
  font-size: 14px;
  line-height: 1.8;
}
.carbon-industry-news {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-top: 20px;
}
.news-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
}
.news-header h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
}
.news-content {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.news-column {
  flex: 1;
  min-width: 280px;
}
.left-column .tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tab {
  padding: 4px 8px;
  border-radius: 4px;
  background: #f8fafc;
  cursor: pointer;
}
.tab.active {
  background: #3b82f6;
  color: #fff;
}
.view-more {
  margin-left: auto;
  font-size: 13px;
  color: #0088ff;
  text-decoration: none;
}
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.news-list li {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}
.column-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-bottom: 8px;
}
/* 中间行：数据卡片 */
.middle-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.data-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.supply-icon {
  background: #87e8de;
}
.develop-icon {
  background: #a3e6bd;
}
.sales-icon {
  background: #ffe0b2;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.carbon-metrics {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.footer-metrics {
  margin-top: auto;
  color: #999;
  font-size: 13px;
  line-height: 1.6;
}

/* 底部行：项目阶段 */
.bottom-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.stage-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  flex: 1;
  min-width: 220px;
}

.stage-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  background: linear-gradient(to right, #d9f4f0, #fff);
  padding: 6px 12px;
  border-radius: 4px;
}

.tasks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tasks li {
  margin: 8px 0;
  font-size: 14px;
  color: #666;
}

.action {
  float: right;
  color: #0088ff;
  text-decoration: none;
  font-size: 13px;
}

.action:hover {
  text-decoration: underline;
}

/* 简化版碳交易行情样式 */
.carbon-trade-simplified {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-top: 20px;
}

.trade-header {
  margin-bottom: 15px;
  border-bottom: 1px solid #f1f1f1;
  padding-bottom: 10px;
}

.trade-header h3 {
  font-size: 16px;
  color: #333;
  margin: 0;
}

.trade-summary {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.summary-item {
  flex: 1;
  min-width: 250px;
  background: #f8fafc;
  padding: 15px;
  border-radius: 6px;
}

.summary-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.summary-value {
  font-size: 18px;
  font-weight: bold;
  color: #0088ff;
  margin-bottom: 10px;
}

.summary-details {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.project-types-table {
  overflow-x: auto;
}

.types-table {
  width: 100%;
  border-collapse: collapse;
}

.types-table th,
.types-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid #f1f1f1;
}

.types-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #475569;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .top-row,
  .middle-row,
  .bottom-row,
  .project-stats,
  .trade-summary {
    flex-direction: column;
  }
  .stats-card,
  .data-card,
  .stage-card,
  .table-container,
  .stats-column,
  .summary-item {
    min-width: auto;
    width: 100%;
  }
}
</style>
